Day18 主要是要練習用 Array 的 reduce 方法來做加總的計算

資料

const videosData = [
  { id: 1, title: "Video 1", time: "5:43" },
  { id: 2, title: "Video 2", time: "2:33" },
  { id: 3, title: "Video 3", time: "3:45" },
  { id: 4, title: "Video 4", time: "0:47" },
  { id: 5, title: "Video 5", time: "5:21" },
  { id: 6, title: "Video 6", time: "6:56" },
  { id: 7, title: "Video 7", time: "3:46" },
  { id: 8, title: "Video 8", time: "5:25" },
  { id: 9, title: "Video 9", time: "3:14" },
  { id: 10, title: "Video 10", time: "3:31" },
  { id: 11, title: "Video 11", time: "5:59" },
  { id: 12, title: "Video 12", time: "3:07" },
  { id: 13, title: "Video 13", time: "11:29" },
  { id: 14, title: "Video 14", time: "8:57" },
  { id: 15, title: "Video 15", time: "5:49" },
  { id: 16, title: "Video 16", time: "5:52" },
  { id: 17, title: "Video 17", time: "5:50" },
  { id: 18, title: "Video 18", time: "9:13" },
  { id: 19, title: "Video 19", time: "11:51" },
  { id: 20, title: "Video 20", time: "7:58" },
  { id: 21, title: "Video 21", time: "4:40" },
  { id: 22, title: "Video 22", time: "4:45" },
  { id: 23, title: "Video 23", time: "6:46" },
  { id: 24, title: "Video 24", time: "7:24" },
  { id: 25, title: "Video 25", time: "7:12" },
  { id: 26, title: "Video 26", time: "5:23" },
  { id: 27, title: "Video 27", time: "3:34" },
  { id: 28, title: "Video 28", time: "8:22" },
  { id: 29, title: "Video 29", time: "5:17" },
  { id: 30, title: "Video 30", time: "3:10" },
  { id: 31, title: "Video 31", time: "4:43" },
  { id: 32, title: "Video 32", time: "19:43" },
  { id: 33, title: "Video 33", time: "0:47" },
  { id: 34, title: "Video 34", time: "0:47" },
  { id: 35, title: "Video 35", time: "3:14" },
  { id: 36, title: "Video 36", time: "3:59" },
  { id: 37, title: "Video 37", time: "2:43" },
  { id: 38, title: "Video 38", time: "4:17" },
  { id: 39, title: "Video 39", time: "6:56" },
  { id: 40, title: "Video 40", time: "3:05" },
  { id: 41, title: "Video 41", time: "2:06" },
  { id: 42, title: "Video 42", time: "1:59" },
  { id: 43, title: "Video 43", time: "1:49" },
  { id: 44, title: "Video 44", time: "3:36" },
  { id: 45, title: "Video 45", time: "7:10" },
  { id: 46, title: "Video 46", time: "3:44" },
  { id: 47, title: "Video 47", time: "3:44" },
  { id: 48, title: "Video 48", time: "4:36" },
  { id: 49, title: "Video 49", time: "3:16" },
  { id: 50, title: "Video 50", time: "1:10" },
  { id: 51, title: "Video 51", time: "6:10" },
  { id: 52, title: "Video 52", time: "2:14" },
  { id: 53, title: "Video 53", time: "3:44" },
  { id: 54, title: "Video 54", time: "5:05" },
  { id: 55, title: "Video 55", time: "6:03" },
  { id: 56, title: "Video 56", time: "12:39" },
  { id: 57, title: "Video 57", time: "1:56" },
  { id: 58, title: "Video 58", time: "4:04" },
];

• 初始資料可以設定為物件

  const [totalTime, setTotalTime] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

計算時間

• 用 split(":") 來切割字串

• 再用 reduce 計算總合

  const calculateTotalTime = () => {
    const totalSeconds = videosData.reduce((acc, video) => {
      const [mins, secs] = video.time.split(":").map(Number);
      return acc + mins * 60 + secs;
    }, 0);

    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    setTotalTime({ hours, minutes, seconds });
  };

版面結構

• 用 padStart(2, "0") 來確保字串都有 2 位數

  return (
    <div className="max-w-2xl mx-auto mt-4 p-6 bg-white rounded-lg shadow-xl">
      <h1 className="text-2xl font-bold mb-4 text-gray-800">
        Video Time Calculator
      </h1>

      <ul className="mb-6 max-h-96 overflow-y-auto">
        {videosData.map((video) => (
          <li
            key={video.id}
            className="flex justify-between items-center py-2 border-b"
          >
            <span className="text-gray-700">{video.title}</span>
            <span className="text-gray-600" data-time={video.time}>
              {video.time}
            </span>
          </li>
        ))}
      </ul>

      <button
        type="button"
        onClick={calculateTotalTime}
        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
      >
        Calculate Total Time
      </button>

      <div className="bg-blue-100 p-4 rounded-md">
        <h2 className="text-lg font-semibold mb-2 text-blue-800">
          Total Time:
        </h2>
        <p className="text-2xl font-bold text-blue-900">
          {`${totalTime.hours.toString().padStart(2, "0")}:${totalTime.minutes
            .toString()
            .padStart(2, "0")}:${totalTime.seconds
            .toString()
            .padStart(2, "0")}`}
        </p>
      </div>
    </div>
  );

DEMO

https://codesandbox.io/p/devbox/9tn8w8